<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo - youbike</title>
  <style>
    #mapDiv { width: 900px; height: 600px; }
    .map-box{ font-size: 14px; margin-bottom: 3px; }
    input.along{ width: 50px; }
  </style>

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/turf.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
</head>
<body onload="initMap()">

  <div id="mapDiv"></div>

<script>
var map, infoWindow = new google.maps.InfoWindow({ content: "" });
var dataMap = new google.maps.Data();
var turfPoint = turf.point([121.611764431, 25.041092529]);
var circle = turf.buffer(turfPoint, 1, "kilometers");
var ubikePin;

function initMap() {
  // 地圖初始設定
  var mapOptions = {
      center: new google.maps.LatLng(25.041092529, 121.611764431),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapElement = document.getElementById("mapDiv");

  var draw = function(ubikePin, newCircle, pos){
    newCircle = newCircle || circle;
    pos = pos || map.getCenter();

    dataMap.setMap(null);
    dataMap = new google.maps.Data();

    dataMap.addGeoJson( newCircle );
    dataMap.setMap(map);

    dataMap.addListener('click', function(e) {

      if( e.feature.getProperty('id') ){
        var anchor = new google.maps.MVCObject();
        anchor.set("position", e.latLng);
        var str = [];
        str.push('<div class="map-box">' + e.feature.getProperty('addr') + "</div>");
        str.push('<div class="map-box">距離約 ' +
          turf.distance(turf.point([e.latLng.lng(), e.latLng.lat()]), turf.point([pos.lng(), pos.lat()]), 'kilometers') * 1000 +
          " 公尺</div>");

        infoWindow.setContent(str.join(''));
        infoWindow.open(map, anchor);
      }else{
        infoWindow.close();
      }

    });

    if( ubikePin ){
      dataMap.setStyle(function(feature){
        if( feature.getProperty('inner') ){
          return { icon: new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=bicycle|FFFF88") };
        }
        else if( feature.getProperty('id') ){
          return { icon: new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=bicycle|CCCCCC") };
        }
      });

      for (var i = 0; i < ubikePin.length; i++) {
        pt = turf.point([ parseFloat(ubikePin[i].lng), parseFloat(ubikePin[i].lat)],
            { id: ubikePin[i]._id, addr: ubikePin[i].ar, sna: ubikePin[i].sna });

        if( turf.inside(pt, newCircle.features[0]) ){ pt.properties.inner = "ture"; }
        dataMap.addGeoJson( pt );
      }
    }
  };

  map = new google.maps.Map(mapElement, mapOptions);

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(25.041092529, 121.611764431),
    map: map,
    draggable: true
  });

  google.maps.event.addListener(marker, 'dragend', function(e) {
    map.panTo(e.latLng);

    var pt = turf.point([e.latLng.lng(), e.latLng.lat()]);
    var c = turf.buffer(pt, 1, "kilometers");
    draw(ubikePin, c, e.latLng);
  });

  $.get("youbike.json", function(data){
    var pts = [], pt;
    ubikePin = data.result.results;
    draw(ubikePin);
  });
}



</script>

</body>
</html>